@extends('layouts.app')

@section('content')
	<link rel="stylesheet" type="text/css" href="{{ asset('css/vue-eui.css') }}"/>
	
		<!-- <header class="eui-header">
			<a class="eui-icon eui-icon-bars eui-position-left"></a>
			<h1 class="eui-title">聊天互动</h1>
			<a class="eui-icon eui-icon-about eui-position-right"></a>
		</header> -->
		<!--直播窗口-->
		<!-- <div class="chat-flashBox">
			直播
		</div>	 -->
		<div class="flash-chat topChat">
			<a href="#" onclick="JavaScript:history.back(-1);" class="flash-chatA"><img src="{{ asset('images/bleft.png')}}" alt="" width="25px" class="textLeft verAlign" style="margin-top:-5px;"></a>
			<h1>聊天互动</h1>
		</div>
		<!-- <div class="flash-chat clear">
				<a href="#" class="flash-chatA active"><img src="{{ asset('images/bleft.png')}}" alt="" width="25px" class="textLeft"></a>
				<a href="#" class="flash-chatA active textLeft">直播互动</a>
		</div> -->
		<div id="chat">
			<div class="eui-wrap-page"  id="euiBox">
			<p class="textAlign" id="loadingT"><img src="{{ asset('images/loading.gif') }}" alt="" v-if="loading"></p>
			  <div class="eui-scroller">
				<ve-chatlist :listdata="listdata"></ve-chatlist>	
			  </div>
		</div>
			
		<footer class="eui-footer eui-chat-footer" style="text-indent:10px;">
			<div class="eui-chat-input">
				<textarea type="text" autofocus="autofocus" v-model="sendContent" v-on:keyup.enter="send"></textarea>
			</div>
			<div class="eui-chat-btn">
				<button class="eui-btn eui-btn-secondary" @click="send">发送</button>
			</div>
	  	</footer>
  		<!-- <script src="{{ asset('packages/bootstrap/jquery.min.js') }}" type="text/javascript" charset="utf-8"></script> -->
		
		<script src="{{ asset('js/vue.js') }}" type="text/javascript" charset="utf-8"></script>

		<script src="{{ asset('js/iscroll-lite.js') }}" type="text/javascript" charset="utf-8"></script>
		<script src="{{ asset('js/app.js') }}"></script>

		<script type="text/javascript">
		Vue.component('ve-chatlist', {	
			props: ['listdata'],
			template:
				'<div class="@{{item.type}} clear countClass" v-for="item in listdata">'+
				    '<div class="eui-chat-avatar ">@{{item.chatName}}</div>'+
				    '<div class="eui-chat-content">'+
				    	'<div class="eui-chat-triangle"></div>'+
				    	'<span>@{{item.msg}}</span>'+
				    '</div>'+
				'</div>'
		})
		$(".eui-chat-content")
		// 创建根实例
			var sendUrl="{{ url('/sendchat') }}";
			var pageUrl="";
			var pageNum = 1;//默认从第一页开始
			var chatlist=new Vue({
			  	el: '#chat',
			  	data: {
			  		sendContent:'',
			  		loading:false,
				    listdata: [
				    	@foreach($messages as $m)
				    	@if($m->user_id != $user->id)
			      		{ 
			      			type:'eui-chat-receiver',
			      			chatName:'{{ $m->user->name }}',
			      			msg: '{{ $m->message }}',
			      		},
			      		@else
			      		{ 
			      			type:'eui-chat-sender',
			      			chatName:'我',
			      			msg:'{{ $m->message }}',
			      		},
			      		@endif
			      		@endforeach
			    	]	    
				},
				methods:{
					send:function(){
						var content = this.sendContent.trim();
					    if (content) {
					    	
					       this.listdata.push({  
								type:'eui-chat-sender',/*代表当前用户发送的消息*/
								chatName:'我',
								msg: content
							});
							this.sendContent = '';
							//重新调整窗口大小
					     	var scrollBottom = $(".eui-wrap-page").scrollTop() + $(".eui-wrap-page").height()+100;
					    	$.ajax({
								type:"post",
								url:sendUrl,
								async:true,
								data:{message:content,_token:"{{ csrf_token() }}"},
								success:function(data){
									$(".eui-wrap-page").scrollTop(scrollBottom);
								}
							});

					    }
					},
					page:function(page){//分页
		 				$.ajax({
							type:"get",
							url:"{{ url('/chat/more') }}",
							data:{page:pageNum},
							async:true,
							beforeSend:function(data){
								chatlist.loading = true;
							},
							success:function(data){
								 console.log(data);
								 chatlist.loading = false;
								if(data.length != 0){
								 	chatlist.listdata = data.concat(chatlist.listdata);
								 	pageNum++;
								 	console.log(pageNum);
								}
							}
						});
					}
				}
			})
			var box = document.getElementById("euiBox");
			var mx,ml;
			window.Echo.channel('chat-room.1')
						    .listen('ChatMessageWasReceived', function (data) {
						        console.log(data.user, data.chatMessage);
						         //uio.push({name:data.user.name,message:data.chatMessage.message});
						    	if({{ $user->id }} != data.user.id){
						    	 	chatlist.listdata.push({  
										type:'eui-chat-receiver',/*代表当前用户发送的消息*/
										chatName:data.user.name,
										msg: data.chatMessage.message
									});
									var scrollBottom = $(".eui-wrap-page").scrollTop() + $(".eui-wrap-page").height()+100;
							     	$(".eui-wrap-page").scrollTop(scrollBottom);
						    	}
						    });
		</script>
	</div>
	<script src="{{ asset('js/hammer.js') }}" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){
         //创建一个新的hammer对象并且在初始化时指定要处理的dom元素
         var hammertime = new Hammer(document.getElementById("euiBox"));
         //添加事件
         
         //hammertime.get('pan').set({ direction: Hammer.DIRECTION_DOWN });
         
         // hammertime.on("pan", function (e) {
         //     console.log(888);
         // });

         hammertime.on("panend", function (e) {
             //console.log("X偏移量：【" + e.deltaX + "】，Y偏移量：【" + e.deltaY + "】<br />") ;
            if(e.direction==16){
	             var scrollTop = $('#euiBox').scrollTop();
				 // //console.log(scrollTop)
				 if(scrollTop <= 0){
				 	//console.log("滚动条顶部"+scrollTop);
				   chatlist.page();
				 } 
			}
             //控制台输出
             //console.log(e);
         });
         /*数据加载完后再调整*/
		var scrollBottom = $(".eui-wrap-page").scrollTop() + $(".eui-wrap-page").height()+100;
		$(".eui-wrap-page").scrollTop(scrollBottom);
         });

    </script>


@endsection
